<template>
    <div class="cont mb-4">
        <CustomQuery @submit="changeQuery" :form-columns="queryList"></CustomQuery>
    </div>
    <div class="cont">
        <CustomTable selection :columns="columns" :data-source="data">
            <template #column-head="{ record }">
                <img class="w-18 h-18 rounded-full" :src="record.head" alt="用户头像">
            </template>
            <template #column-state="{ column }">
                <a-tag color="green">活跃</a-tag>
            </template>
            <template #column-action="{ column }">
                <a-button type="primary" :icon="h(EditOutlined)">编辑</a-button>
            </template>
        </CustomTable>
    </div>
</template>

<script setup lang="ts">
import { PlusOutlined, EditOutlined } from '@ant-design/icons-vue';
import { h } from 'vue'

import CustomTable from '@/components/customTable/CustomTable.vue';
import CustomQuery from '@/components/customQuery/CustomQuery.vue';
import { CustomQueryColumns, CustomQueryValue } from '@/components/customQuery/types';
import { CustomTableColumns, CUstomTableData } from '@/components/customTable/types';

const queryList = reactive<CustomQueryColumns[]>([
    { label: '订单编号', key: 'orderCode', type: 'input' },
    { label: '代理编码', key: 'proxyCode', type: 'input' },
    { label: '城市编号', key: 'localCode', type: 'input' },
    { label: '描述', key: 'remark', type: 'input' }
])

const changeQuery = (queryState: CustomQueryValue) => {
    alert('查询结果为' + JSON.stringify(queryState))
}

const data = ref<CUstomTableData[]>([])
const columns = reactive<CustomTableColumns[]>([
    {
        title: "订单编号",
        dataIndex: "code",
        key: "code",
    },
    {
        title: "平台收入",
        dataIndex: "platformRevenue",
        key: "platformRevenue",
    },
    {
        title: "代理收入",
        dataIndex: "agencyIncome",
        key: "agencyIncome",
    },
    {
        title: "骑手收入",
        dataIndex: "riderIncome",
        key: "riderIncome",
    },
    {
        title: "描述",
        dataIndex: "remark",
        key: "remark",
    },
    {
        title: "时间",
        dataIndex: "time",
        key: "time",
    },
    {
        flag: 'ACTION'
    },
]);


onMounted(() => {
    for (let i = 0; i < 100; i++) {
        data.value.push(
            { code: '01',platformRevenue:'83902189',agencyIncome:'2313',riderIncome:'12904821,',remark:'这是一段描述信息', time: '2024-08-16' },
        )
    }
})
</script>

<style scoped></style>